<template>
  <div class="flex between main">
    <div class="main-left">
      <div class="left-div1">
        <div class="title title1">校园通知</div>
        <template v-for="(item, index) in schoolList">
          <template v-if="!index">
            <div class="new-item flex between">
              <img src="@/assets/icon1-a.png" />
              <div>{{ item.title }}</div>
            </div>
          </template>
          <template v-else>
            <div class="new-item2 flex align between">
              <div>
                {{ item.title }}
              </div>
              <div>{{item.create_time}}</div>
            </div>
          </template>
        </template>
      </div>
      <div class="left-div2">
        <div class="title title2">班级通知</div>
        <div
          class="div2-item flex align"
          v-for="(item, index) in clazzList"
          :key="index"
        >
          <div class="item-date">
            <div>{{ "0" + (index + 1) }}</div>
            <div>{{ item?.times?.month }}/{{ item?.times?.day }}</div>
          </div>
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="main-center">
      <div class="title title3">班级风采</div>
      <div class="banner">
        <el-carousel height="500px">
          <el-carousel-item
            v-for="item in clazzInfo?.photo_album"
            :key="item"
          >
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="main-right">
      <div class="right-div1">
        <div class="title title3">班级文化</div>
        <div
          class="right-item flex between"
          v-for="(item, index) in 3"
          :key="index"
        >
          <div>标题标题标题标题标题标题标题</div>
          <img src="@/assets/img.png" />
        </div>
      </div>
      <div class="right-div2">
        <div class="title title4">值日表<span>星期一</span></div>
        <div class="right-item flex align between">
          <div>姓名</div>
          <div>负责区域</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { clazz } from "@/api/apiData";
import { onMounted, ref, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const Route = useRoute();
const { setAppTitle } = inject("global-stroe");
const deviceInfo = ref({});
const clazzInfo = ref({});
const clazzList = ref([]);
const schoolList = ref([]);
onMounted(async () => {
  const device_id = Route?.query?.deviceId || "10001";
  const { data: device } = await clazz.device.detail({ device_id });
  deviceInfo.value = device;
  setAppTitle(device.room.name + " " + device.clazz.name);
  const { data: detail } = await clazz.detail({ clazz_id: device.clazz_id });
  clazzInfo.value = detail;
  const { data: clazzLists } = await clazz.article.lists({
    clazz_id: device.clazz_id,
    page: 1,
    size: 3,
    category_id: 1,
  });
  console.log("clazzLists", clazzLists);
  clazzList.value =
    clazzLists?.list?.map((item) => ({
      ...item,
      times: timeFormat(item.create_time),
    })) || [];
  const { data: schoolLists } = await clazz.article.lists({
    clazz_id: device.clazz_id,
    page: 1,
    size: 4,
    category_id: 2,
  });
  schoolList.value = schoolLists?.list || [];
});

function timeFormat(time = "") {
  const [year = "", month = "", day = ""] = time.split(" ")[0]?.split("-");
  return {
    year,
    month,
    day,
  };
}
</script>
<style
  lang="less"
  scoped
>
.main {
  margin: 20px;
  padding-bottom: 200px;
  .title {
    color: white;
    border-radius: 8px 8px 0px 0px;
    font-size: 32px;
    padding: 11px;
    text-align: center;
  }
  .main-left {
    width: 452px;
    .left-div1 {
      background: white;
      font-size: 20px;
      padding-bottom: 15px;
      border-radius: 8px;
      .title1 {
        background: linear-gradient(to right, #fe9a14, #fe774a);
      }
      .new-item {
        margin: 16px;
        padding-bottom: 20px;
        border-bottom: solid 1px #f5f5f5;
        img {
          width: 176px;
          height: 118px;
        }
        div {
          width: 55%;
        }
      }
      .new-item2 {
        font-size: 16px;
        padding: 5px 16px;
        div:nth-child(1) {
          width: 70%;
          overflow: hidden;
          white-space: nowrap; //内容超出不换行
          text-overflow: ellipsis;
        }
        div:nth-child(2) {
          width: 25%;
          color: #a2a2a2;
          text-align: right;
        }
      }
    }
    .left-div2 {
      margin-top: 20px;
      background: white;
      padding-bottom: 20px;
      border-radius: 8px;
      .title2 {
        background: linear-gradient(to right, #9e4bfd, #7747ff);
      }
      .div2-item {
        margin: 16px 16px 10px;
        border: solid 1px #71e2b8;
        border-radius: 8px;
        .item-date {
          background: #71e2b8;
          border-radius: 8px;
          color: white;
          width: 64px;
          height: 60px;
          text-align: center;
          padding-top: 5px;
          margin-right: 20px;
        }
      }
    }
  }
  .main-center {
    width: 936px;
    background: white;
    .title3 {
      background: linear-gradient(to right, #56abf9, #5686fc);
    }
    .banner {
      padding: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .main-right {
    width: 452px;
    .right-div1 {
      background: white;
      border-radius: 8px;
      .title3 {
        background: linear-gradient(to right, #fe3875, #fc454a);
      }
      .right-item {
        font-size: 20px;
        padding: 10px 16px;
        img {
          width: 84px;
          height: 84px;
        }
      }
    }
    .right-div2 {
      margin-top: 20px;
      .title4 {
        background: linear-gradient(to right, #18e1b8, #04be93);
        span {
          font-size: 24px;
          margin-left: 20px;
        }
      }
      .right-item {
        font-size: 20px;
        background: white;
        div {
          text-align: center;
          padding: 9px 0;
          flex: 1;
        }
        div:nth-child(1) {
          border-right: dotted 1px #0ac89e;
        }
      }
    }
  }
}
</style>
